@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  --van-cell-active-color: transparent;
  --van-overlay-background: rgba(0, 0, 0, 0.85);
  min-height: 100vh;
}
.hairline-bottom {
  box-shadow: rgb(255 255 255 / 5%) 0 1px 0;
}

.align-center {
  @apply flex items-center;
}

.flex-center {
  @apply flex items-center justify-center;
}

[pc-only='flex'] {
  @apply hidden lg:flex;
}

[pc-only='block'] {
  @apply hidden lg:block;
}

[only='pc'] {
  @apply hidden lg:block;
}

[only='h5'] {
  @apply lg:hidden;
}

[only='pc-flex'] {
  @apply hidden lg:flex;
}

[mobile-only='yes'] {
  @apply lg:hidden;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 1024px) {
  .card-active:hover {
    transform: scale3d(1.01, 1.01, 1.01);
    transition: 0.2s;
  }
}

.card-hover:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}

body,
html {
  background: #1f1f1f;
}

/* 适用于支持的浏览器 */
html {
  scrollbar-color: transparent transparent; /* 设置滚动条为透明 */
}

/* 适用于Webkit内核的浏览器（如Chrome、Safari） */
html::-webkit-scrollbar {
  width: 10px; /* 控制滚动条宽度 */
}

html::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #535353;
}

html::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 1);
  background: #ededed;
}

:root {
  color-scheme: auto;
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.product-poster {
  filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.7));
}
.product-poster--small {
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
}
.hover-scale {
  transition: 0.2s;
  will-change: transform;
}
.hover-scale:hover {
  transform: scale3d(1.03, 1.03, 1.03);
}
.input {
  appearance: none;
  height: 2.3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.3rem;
  border-width: 1px;
  border-color: transparent;
}

.input-info {
  border-color: #00b6ff;
}
.select-error {
  border-color: #ff5861 !important;
}

.select {
  user-select: none;
  appearance: none;
  height: 2.3rem;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.3rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}
.select-info {
  border-color: #00b6ff;
}
